{% if isFramework("angular") %}
## Component Lifecycle Hook agInit
{% /if %}

{% if isFramework("angular") %}
Each custom Angular component must implement the `agInit(params)` lifecycle hook. AgInit is called by AG Grid before any of the [Angular Lifecycle hooks](https://angular.dev/guide/components/lifecycle#), including `ngOnInit`. This order is deterministic and applies to all component types.
{% /if %}

{% if isFramework("angular") %}
## Mixing JavaScript and Angular

When providing Custom Components you have a choice of the following:
1. Provide an AG Grid component as an Angular Component.
1. Provide an AG Grid component in JavaScript.

The following code snippet shows how both JavaScript and Angular Components can be used at the same time:

{% /if %}

{% if isFramework("angular") %}
```ts
//...other imports
import { Component } from '@angular/core';
import JavascriptComponent from './JavascriptComponent.js';
import { AngularComponent }  from './angular.component';

@Component({
selector: 'app-root',
template: `
  <ag-grid-angular [columnDefs]="columnDefs" [components]="components"
                   ...other properties />
`
})
export class AppComponent {
  // JS and Angular components, only need register if looking up by name
  components = {
      'javascriptComponent': JavascriptComponent,
      'angularComponent': AngularComponent
  };
  columnDefs = [
      {
          headerName: "JS Cell",
          field: "value",
          cellRenderer: 'javascriptComponent', // JS comp by Name
      },
      {
          headerName: "JS Cell",
          field: "value",
          cellRenderer: JavascriptComponent, // JS comp by Direct Reference
      },
      {
          headerName: "Angular Cell",
          field: "value",
          cellRenderer: 'angularComponent', // Angular comp by Name
      },
      {
          headerName: "Angular Cell",
          field: "value",
          cellRenderer: AngularComponent, // Angular comp by Direct Reference
      }
  ];

  //...other properties & methods
}
```
{% /if %}

{% if isFramework("angular") %}
{% warning %}
Javascript components are run outside of NgZone. If they initiate calls into your Angular application you may need to wrap these calls within `ngZone.run()` for Change Detection to correctly run.
{% /warning %}
{% /if %}
